<template>
  <div class="home-box">
    <!-- tabar -->
    <Tabbar>
    </Tabbar>
    <el-row class="tac left-nav">
      <el-col :span="12">
        <el-menu
          :unique-opened="true"
          active-text-color="red"
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
          <el-menu-item index="1">
            <span slot="title" @click="$router.push('/home/find')">发现音乐</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title">播客</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title" @click="$router.push('/home/move')">视频</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span slot="title">关注</span>
          </el-menu-item>
          <el-menu-item index="5">
            <span slot="title">直播</span>
          </el-menu-item>
          <el-menu-item index="6">
            <span slot="title">私人FM</span>
          </el-menu-item>
          <el-menu-item index="6" disabled>
            <span slot="title">我的音乐</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="iconfont icon-xihuan min-mar-r"></i>
            <span slot="title">我喜欢的音乐</span>
          </el-menu-item>
          <el-menu-item index="8">
            <i class="iconfont icon-xiazai min-mar-r"></i>
            <span slot="title">本地与下载</span>
          </el-menu-item>
          <el-menu-item index="9">
            <i class="iconfont icon-zuijinbofang min-mar-r"></i>
            <span slot="title">最近播放</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!-- 中间视图 -->
    <div class="main-show">
      <router-view></router-view>
    </div>
    <!-- 音乐播放器 -->
    <play-control 
      ref="playControl" 
      :songCover="music.songs_al.picUrl" 
      :songName="music.songName" 
      :songAlia="music.songs_alia[0]" 
      :songAuthor="music.songs_ar[0].name"
      :songId="music.song_id" 
      :songUrl="music.playUrl" 
      :musicList="musicList"
    >
    </play-control>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabar/Tabar.vue'
import PlayControl from '@/components/PlayControl/PlayControl'
import {mapState,mapActions,mapMutations} from 'vuex'
export default {
  name:'Home',
  components:{
    Tabbar,
    PlayControl
  },
  mounted(){
    this.clearList()
  },
  computed:{
    ...mapState('Music',['music','musicList'])
  },
  data(){
    return {
    }
  },
  methods:{
    ...mapMutations('Music',['CLEARMUSICLIST']),
    handleOpen(){

    },
    handleClose(){

    },
    clearList(){
      this.$bus.$on('clearList',()=>{
        this.CLEARMUSICLIST()
      })
    }
  }
}
</script>

<style lang="less" scoped>
@color-tab:rgba(255,255,255);
@color-red:#ec4141;
@min-pad-lr:0px 1rem;
@min-mar-lr:0px 1rem;
@min-mar-r:0px .5rem 0px 0px;
@min-font-size: .5rem;
.min-pad-lr {
  padding: @min-pad-lr;
}
.min-mar-lr {
  margin: @min-mar-lr;
}
.min-mar-r {
  margin: @min-mar-r;
}
.min-font-size {
  font-size: @min-font-size;
}
.cur {
  cursor: pointer;
}
.red-hover:hover {
  color: @color-red;
  transition: .2s;
}
.home-box {
  height: 100vh;
}
::v-deep.left-nav {
  float: left;
  margin-top: 1px;
  height: calc(100% - 51px);
  width: 15%;
  .el-col-12 {
    width: 100%;
    height: 100%;
    .el-menu {
      height: 100%;
    }
  }
}
::v-deep .el-menu-item {
        font-size: .8rem;
        height: 30px;
        line-height: 30px;
}
::v-deep .el-menu-item:hover{
    outline: 0;
    color: rgb(0, 0, 0);
    background: rgba(18, 18, 18, 0.073);
}
::v-deep .el-menu-item>.is-active {
    outline: 0;
    color: rgb(0, 0, 0);
    background: rgba(18, 18, 18, 0.073) !important;
}
.main-show {
  overflow-y: scroll;
  padding: .4rem 1rem;
  float: left;
  width: 85%;
  height: calc(100% - 51px);
  .show-view {
    width: 100%;
    margin: 0 auto;
    background: rgba(42, 42, 42, 0.115);
  }
}
</style>